<template>
  <!-- 提现 -->
  <div class="withdraw">
    <mt-header fixed title="提现">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <!-- <div class="withdraw_top" v-if="withdrawlist == 1">
      <span>到账银行卡：{{ openBank }}{{ bankCode }}</span>
      <span>到 账 时 间：1个工作日到账</span>
    </div>
    <div class="add_bank" v-else>
      <span>暂无银行卡</span>
      <span class="add" @click="addbank">+</span>
    </div> -->
    <div class="operator">
      <span>提现金额</span>
      <div>
        ￥
        <input type="number" v-model="amount" />
      </div>
      <!-- <div v-if="accountBalance == undefined"></div> -->
      <div>
        <div>当前零花钱余额{{ accountBalance / 100 }}元</div>
        <div class="all_withdraw" @click="allbindtap">全部提现</div>
      </div>
      <div class="instructions">
        <h5>个人提现说明</h5>
        <p>1.每人每次提现金额最低1元，最高限额5000元；</p>
        <p>2.每人每日最多提现10次。</p>
      </div>
      <div class="tixian">
        <button @click="tixian">确认提现</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { queryBank, cashOut, Cash } from "../../api/api";
import querystring from "query-string";
import { Header, Toast } from "mint-ui";
import globalFunction from "../../api/public";

export default {
  name: "Withdraw",
  data() {
    return {
      withdrawlist: "",
      openBank: "",
      bankCode: "",
      amount: "",
      accountBalance: "",
      iosShow: false
    };
  },
  created() {
    this.accountBalance = this.$route.query.accountBalance;
    this.Phonetype();
    // console.log(this.accountBalance);
    // if (this.accountBalance == undefined) {
    //   this.amount = 0;
    // } else {
    // this.amount = this.accountBalance / 100;
    // }
  },
  methods: {
    //点击添加银行卡
    addbank() {
      this.$router.push({
        path: "/Salesman/addwithdraw"
      });
    },
    //银行卡列表
    queryBank() {
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      queryBank(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data == null) {
          } else {
            this.withdrawlist = 1;
            this.openBank = res.data.data.openBank;
            this.bankCode = res.data.data.bankCode;
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    },
    //全部提现
    allbindtap() {
      if (this.accountBalance == undefined) {
        this.amount = 0;
      } else {
        this.amount = this.accountBalance / 100;
      }
    },
    //确认提现
    tixian: globalFunction.debounce(function() {
      if (this.amount == "" && this.amount < 5000) {
        Toast("请输入提现金额(提现最高限额5000元)");
        return;
      } else if (this.amount == 0) {
        Toast("请输入提现金额");
        return;
      } else if (this.amount > this.accountBalance / 100) {
        Toast("余额不足");
        return;
      } else if (this.amount < 1) {
        Toast("提现金额不能少于1元");
        return;
      }

      var params = {
        amount: parseInt((this.amount * 100).toFixed(10))
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      var a = JSON.parse(a);
      Cash(params, a).then(res => {
        if (res.data.code == 1) {
          this.amount = "";
          Toast({ message: res.data.data.msg, duration: 1500 });
          this.$router.push({
            path: "/Salesman/me"
          });
        } else {
          Toast(res.data.message);
        }
      });
    })
  },
  mounted() {
    this.queryBank();
  }
};
</script>
<style lang="scss" scoped>
.mint-header {
  background: #ffffff;
  color: #333333;
}
.withdraw {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.add_bank {
  width: 100%;
  height: 1.22rem;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  color: #333333;
  box-sizing: border-box;
  padding-left: 0.29rem;
}
.add_bank .add {
  display: block;
  width: 0.36rem;
  height: 0.36rem;
  font-size: 0.3rem;
  border: 0.02rem solid #ffb400;
  text-align: center;
  line-height: 0.36rem;
  color: #ffb400;
  margin-left: 0.1rem;
}
.withdraw_top {
  width: 100%;
  height: 1.75rem;
  font-size: 0.3rem;
  display: flex;
  flex-direction: column;
  border-top: 0.02rem solid #eeeeee;
  color: #333333;
  box-sizing: border-box;
  padding-left: 0.38rem;
}
.withdraw_top span:nth-child(1) {
  margin-top: 0.46rem;
}
.withdraw_top span:nth-child(2) {
  margin-top: 0.25rem;
}
.operator {
  width: 100%;
  height: 2.78rem;
  border-top: 0.02rem solid #dddddd;
  border-bottom: 0.2rem solid #eeeeee;
}
.operator span:nth-child(1) {
  display: inline-block;
  margin-top: 0.39rem;
  margin-left: 0.39rem;
  font-size: 0.38rem;
  color: #333333;
}
.operator div:nth-child(2) {
  display: flex;
  height: auto;
  margin-left: 0.37rem;
  font-size: 0.7rem;
  color: #ffb400;
}
.operator div:nth-child(2) input {
  width: 6rem;
  height: 0.7rem;
  margin-top: 0.24rem;
  line-height: 0.7rem;
  border: none;
  font-size: 0.7rem;
  color: #ffb400;
}
.operator div:nth-child(3) {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  font-size: 0.3rem;
  padding-left: 0.39rem;
  padding-right: 0.4rem;
  color: #333333;
  display: flex;
  justify-content: space-between;
}
.operator div:nth-child(3) .all_withdraw {
  font-size: 0.3rem;
  color: #212c67;
}
.operator .tixian {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.operator .tixian button {
  width: 6.62rem;
  height: 0.9rem;
  background: linear-gradient(
    -90deg,
    rgba(255, 167, 0, 1),
    rgba(255, 204, 0, 1)
  );
  line-height: 0.9rem;
  border-radius: 0.08rem;
  color: #ffffff;
  font-size: 0.34rem;
  margin-top: 0.62rem;
  border: none;
  outline: none;
}
.instructions {
  width: 100%;
  height: auto;
  overflow: hidden;
  h5 {
    font-size: 0.3rem;
    color: #333333;
    padding-left: 0.32rem;
    margin-top: 0.9rem;
    margin-bottom: 0.29rem;
  }
  p {
    font-size: 0.26rem;
    color: #666666;
    padding-left: 0.33rem;
  }
}
</style>